<script setup>
import AMapLoader from '@amap/amap-jsapi-loader'
import { onMounted, ref } from 'vue'
import markIcon from '../assets/map/mar.png'
window._AMapSecurityConfig = {
  securityJsCode: 'aa1a0fab12fffab4c0d555bbc1442114',
}

const map = ref(null)

function initMap() {
  AMapLoader.load({
    key: 'a6794a03cacb78f0fe441efa7fd43e7f', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).then((AMap) => {
    map.value = new AMap.Map('container', { // 设置地图容器id
      viewMode: '3D', // 是否为3D地图模式
      zoom: 15, // 初始化地图级别
      center: [118.737764, 32.038848], // 初始化地图中心点位置
    })

    // 添加固定点标记
    const marker1 = new AMap.Marker({
      position: new AMap.LngLat(118.730372, 32.033273), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      title: '星问科技',
    })
    // 添加点标记
    map.value.add(marker1)
    // let defineMarker1 = new AMap.Marker({
    //     position: new AMap.LngLat(118.737764,32.038848),
    //     icon:markIcon,
    //     title: 'defineMarkerPlace'
    //   })
    //   map.value.add(defineMarker1)
  }).catch((e) => {
    console.log(e)
  })
}

onMounted(() => initMap())
</script>

<template>
  <div id="container" />
</template>

<style scoped>
#container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
}
</style>
